<template>
  <div class="body" v-if="falg">
   
    <div class="main">
      <span>靶场名称：</span>
      <el-input class="m-2" v-model="input" @blur="inp1(input)" placeholder="请输入靶场名称" />
      <span>难度：</span>
      <el-select v-model="value1" @change="val1(value1)" class="m-2" placeholder="Select">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span>所属类型:</span>
      <el-select v-model="value2" @change="val2(value2)" class="m-2" placeholder="Select">
        <el-option
          v-for="item in options3"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span>文件类型：</span>
      <el-select v-model="value3" @change="val3(value3)" class="m-2" placeholder="Select">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <el-button type="primary" class="btn" @click="add">新增靶场</el-button>
    <div class="table">
      <el-table :data="newLIST" stripe style="width: 100%">
        <el-table-column prop="name" label="靶场名称" width="180" />
        <el-table-column prop="level" label="难度" width="180" />
        <el-table-column prop="category" label="所属分类" />
        <el-table-column prop="fileType" label="文件类型" />
        <el-table-column label="操作">
         <template v-slot="scope">

          <!-- {{scope.row}} -->
           <el-button type="primary">查看</el-button>
            <el-button type="primary" @click="makeList(scope.row.id)">编辑</el-button>
            <el-button @click="del(scope.row.id)">删除</el-button>
         </template>
      
         
        </el-table-column>
      </el-table>
    </div>
    
  </div>

  <RouterView v-else></RouterView>
</template>


<script setup >


import { ref ,watch,onMounted,onUpdated} from "vue";

import { useRouter,useRoute } from 'vue-router';
import {eventsBus} from "../../utils/eventBus"
import {useRangData} from '../../store/rangData'
const route=useRoute()
const input = ref("");
const value1 = ref("请选择");
const value2 = ref("请选择");
const value3 = ref("请选择");
const router = useRouter();
const falg=ref(true)
const options1 = [
  {
    value: "简单",
    label: "简单"
  },
  {
    value: "中等",
    label: "中等"
  },
  {
    value: "困难",
    label: "困难"
  }
];
const options2 = [
  {
    value: "镜像文件",
    label: "镜像文件"
  },
  {
    value: "war",
    label: "war"
  },
  {
    value: "zip",
    label: "zip"
  }
];
const options3 = [
  {
    value: "SQL注入类",
    label: "SQL注入类"
  },
  {
    value: "扫描类",
    label: "扫描类"
  },
  {
    value: "文件类",
    label: "文件类"
  }
];


const val1=(val)=>{
  let list=tableData.filter(item=>item.level==val)
  newLIST.value=list
  console.log(list);
  console.log(val);
}
const val2=(val)=>{
  let list=tableData.filter(item=>item.category==val)
  newLIST.value=list
}
const val3=(val)=>{
  let list=tableData.filter(item=>item.fileType==val)
  newLIST.value=list
}
const inp1=(aa)=>{
  let list=tableData.filter(item=>item.name==aa)
  newLIST.value=list
}
console.log(useRangData());
const tableData=useRangData().state
const add =()=>{
  router.push("rangeList/newList")
  // if (route.path='/home/rangeList/newList') {
  //   falg.value=fasle
  // }
}
const makeList=(num)=>{
  console.log(num);
  router.push('/home/rangeList/makeList')
}
//删除


  let newLIST=ref(tableData)

  const  del=(id)=>{
  newLIST.value=newLIST.value.filter(item=>item.id!=id)
  // console.log(newLIST.value);
 
 
}
// 侦听器
watch(()=>route.path,
(newvalue,oldvalue)=>{
  if (newvalue=='/home/rangeList/newList' || newvalue=='/home/rangeList/makeList'){
    falg.value=false
    
    console.log(123);
    
  }else{
    falg.value=true
    console.log(321);
    
  }
},{
  immediate:true
}

)
</script>

<style lang="scss" scoped>
.el-main {
  padding: 0;
  padding-left: 20px;
}
.nav1 {
  color: rgba($color: #000000, $alpha: 0.5);
}
.main {
  margin-top: 20px;
  background-color: #fff;
  // width: 100%;
  height: 100%;
  padding: 20px;
  // border: 1px solid red;
  .m-2 {
    width: 177px;
    margin-right: 10px;
  }
}
.btn {
  margin: 20px 0;
}
</style>